  
<div class="page">
    <div class="container">
        <div class="span10 offset1" id="wrap" style="margin-top:20px;">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
//bug?
//search salah satu "dari"/"ke" dengan isian yang ada di entry "via", kemudian filter penumpang/pengemudi
	$(document).ready(function(){
		refreshTimeline();
		$('#cari').click(search);
		$('#cariRadius').click(search);
		$('#cbP').change(function(){
			if($('#cbP').is(':checked')){
				status += 1;
			} else {
				status -= 1;
			}
			//alert(status);
			search(); //refresh timeline
		});
		$('#cbU').change(function(){
			if($('#cbU').is(':checked')){
				status += 2;
			} else {
				status -= 2;
			}
			//alert(status);
			search(); //refresh timeline
		});
		$('#amount').keyup(function() {
			//alert($('#amount').val());
			//alert(radiusValid($('#amount').val()));
			//alert(radius);
			// if (radiusValid($('#amount').val())) {
			// 	search(); //refresh timeline
			// }
			//alert($("#amount").val());
		});
	});
	function radiusValid(rad) {
/*
		if (rad valid) {
			set nilai variabel radius,
			return true
		} else {
			radius = null;
			return false;
		}
*/
		radius = null;
		return false;
	}
	var dari = "";
	var ke = "";
	var berangkat = "";
	var sampai = "";
	var radius = null;
	var status = 0;

	var refreshRate = 5000;
	var timelineNum = -1;

	function generateTimelineItem(data) {
	   var ret = "";
	   var size = data.length;
	   for (var i=0;i<size;i++) {
		   var status = data[i]['status'];
		   var id = data[i]['id'];
		   var userId = data[i]['userId'];
		   var name = data[i]['name'];
		   var src = data[i]['source_label'];
		   var dst = data[i]['destination_label'];
		   var via = (data[i]['via']?data[i]['via']:"-");
		   var departTime = data[i]['departTime'];
		   var priceInRupiah = (data[i]['priceInRupiah']?data[i]['priceInRupiah']:"-");
		   var priceInPoint = (data[i]['priceInPoint']?data[i]['priceInPoint']:"-");
		   var avatar = (data[i]['avatar']?"<?php echo base_url()?>avatar/thumb/" + data[i]['avatar']:"<?php echo base_url()?>assets/img/person.jpg");
		   
		   ret = ret + "<div id=\"" + status + id + "\">";
		   ret = ret + "<a href=\"<?php echo site_url().'/profil/detail/'?>"  + userId + "\">";
		   ret = ret + "<div class=\"row-fluid span12 thumbnail\" id=\"profil-side\">";
		   ret = ret + "<div class=\"span2\">";
		   ret = ret + "<div class=\"thumbnail ava\">";
		   ret = ret + "<img data-src=\"<?php echo base_url().'assets/js/holder.js/160x120'?>\" src=\""+ avatar + "\" class=\"\">";
		   ret = ret + "</div>";
		   ret = ret + "<div style=\"font-size:10px;\">";
		   if (status=='P') {
			   ret = ret + "PENGEMUDI";
		   } else if (status=='U') {
			   ret = ret + "PENUMPANG";
		   }
		   ret = ret + "</div>";
		   ret = ret + "</div><div class=\"span8\">";
		   ret = ret + "<strong>" + src + " -> " + dst + "</strong><br/>";
		   ret = ret + "via " + via + "<br/>";
		   ret = ret + name + ", " + departTime + "</div>";
		   ret = ret + "<div class=\"span2\">";
		   ret = ret + priceInRupiah + "<br/>" + priceInPoint;
		   ret = ret + "</div><br/></div></a></div>";
	   }
	   return ret;
	}

	function refreshTimeline() {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/timeline/countTimeline",
		   type:"POST",
		   data: {
			   source_label: dari,
			   destination_label: ke,
			   from: berangkat,
			   to: sampai,
			   status: status,
			   radius: radius
			   },
		   beforeSend:function(){
			   //$("#timeline").hide();
			   //$("#loading").show();
			   dari = $("#dari").val();
			   ke = $("#ke").val();
			   berangkat = $("#berangkat").val();
			   sampai = $("#sampai").val();
			   radius = $("#amount").val();
		   },
		   success:function(result) {
			   //var data = result['timeline'];
			   //var containerId = '#timeline' + arg;
			   //var htmlVal = generateTimelineItem(data);
			   //$(containerId).html(htmlVal);
			   //$(containerId).children('div').each(function(){$(this).fadeIn(2000)});
			   //alert(result['timeline'][0]['name']);
			   if (timelineNum != result) {
				   timelineNum = result;
				   search();
			   }
		   },
		   complete:function(){
			   //$("#loading").hide();
			   //$("#timeline").show();
			   setTimeout(refreshTimeline,refreshRate);
		   }
	   });
	}

	function search() {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/timeline/search",
		   type:"POST",
		   data: {
			   source_label: dari,
			   destination_label: ke,
			   from: berangkat,
			   to: sampai,
			   status: status,
			   radius: radius
			   },
		   dataType:"json",
		   beforeSend:function(){
			   $("#timeline").hide();
			   $("#loading").show();
			   dari = $("#dari").val();
			   ke = $("#ke").val();
			   berangkat = $("#berangkat").val();
			   sampai = $("#sampai").val();
			   radius = $("#amount").val();
		   },
		   success:function(result) {
			   timelineNum = result['timeline'].length;
			   var data = result['timeline'];
			   var htmlVal = generateTimelineItem(data);
			   $('#timeline').html(htmlVal);
			   $('#timeline').children('div').each(function(){$(this).fadeIn(2000)});
		   },
		   complete:function(){
			   $("#loading").hide();
			   $("#timeline").show();
		   }
	   });
	}
</script>
            <div class="container-fluid">
            	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <!-- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> -->
  <script>
  $(function() {
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 1000,
      min: 100,
      max: 10000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value + " m" );
      }
    });
    $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + " m");
    //alert($( "#slider-range-min" ).slider( "value" ));
  });
  </script>
                <div class="row-fluid">
                    <strong>CARI PERJALANAN</strong>
                </div>
                <div class="row-fluid"> 
                    <input type="text" class="input-small" name="source_label" id="dari" placeholder="Dari">
                    <input type="text" class="input-small" name="destination_label" id="ke" placeholder="Ke">
                    <input type="datetime-local" class="input-small" name="from" id="berangkat" placeholder="Berangkat">
                    <input type="datetime-local" class="input-small" name="to" id="sampai" placeholder="Sampai">
                    <button type="button" class="btn" id="cari">CARI</button>
                  
                </div><br/>
                <div class="row-fluid">
                    <div class="span8">
                    	<strong>PERJALANAN TERBARU</strong><br/>
<div id="loading" class="row-fluid span12">
<img class="img" src="<?php echo base_url(); ?>/assets/img/loading.gif" style="display: block; margin-left: auto; margin-right:auto">
</div>
<div id="timeline">

</div>
                    </div>
                    <div class="span4">
                    	<strong>FILTER</strong><br/>
                      <div class="row-fluid" id="profil-side">
                        <div class="span12 offset1">
                        Post<br/>
                          <input type="checkbox" value="" id="cbP">
                          Pengemudi<br/>

<!-- pakai ini & data-toggle jquerynya gak jalan                       <label class="checkbox">-->
                          <input type="checkbox" value="" id="cbU">
                          Penumpang<br/>
<!--                        </label>-->
                          <!-- <div for="amount">Radius pencarian</div>
                          <input type="text" id="amount" style="border:none;" />  -->
                          
                           <label for="amount">Radius Pencarian:</label>
  						<input type="text" id="amount" name="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
  						      
                        <div id="slider-range-min" class=""></div>
                      </div>
                      </div>
                      </div>
                    </div>
                </div><br/>
            </div>
        </div>
    </div>
</div>
